<template>
  <div>
    <el-select v-model="value" style="width: 30%" @change="queryReportByCarId(value)" clearable placeholder="请选择要查询的车辆报表">
      <el-option
        v-for="item in carNo"
        :key="item.id"
        :label="item.car_no"
        :value="item.id">
      </el-option>
    </el-select>

    <div id="main"  style="margin: auto; width: 700px;height: 700px"></div>
  </div>
</template>

<script>
import report_center from "@/api/report_center"
import axios from "axios";
import * as echarts from 'echarts';
export default {
  name: "pie",
  data() {
    return {
      //select框
      carNo: [],
      value: "",
    }
  },
  created() {
    this.queryAllCarNo()
  },
  methods: {
    test(id){
      console.log(id)
    },
    // 给复选框添加查询选项
    queryAllCarNo() {
      report_center.queryAllCarNo().then((data) => {
        this.carNo = data.data.items
      })
    },
    //根据ID查询饼图
    // 复选框改变时查询后端数据,返回数据时渲染生成图表
  queryReportByCarId(carId) {
    if(carId===''||carId==null){
      return
    }
      axios.
      all(report_center.queryReportByCarId(carId)).
      then(axios.spread(function () {
        let array=[];
        for (let argument of arguments) {
          //拿到数据并修改成官方约定的格式
          // data: [
          //   {value: 1048, name: '搜索引擎'},
          //   {value: 735, name: '直接访问'},
          //   {value: 580, name: '邮件营销'},
          //   {value: 484, name: '联盟广告'},
          //   {value: 300, name: '视频广告'}
          // ],
          //拿到数据
         let key= Object.keys(argument.data.data)
          let value= argument.data.data[key][0]
          if (value==null){
            console.log("该"+key+"为空")
            continue
          }
          //删掉多余的行
         delete value.car_no
          //加入到一个新数组
          array.push(value)
        }
        // 修改数据键名
        array = array.map((item)=>{
          return {
            name: item['数据来源'],
            value: item['car_expenses']
          }
        })
        // console.log(array)

        let chartDom = document.getElementById('main');
        let myChart = echarts.init(chartDom);
        //给图表填数据
        let pieOption = {
          title: {
            text: '花费分布',
            subtext: '单个车辆',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: '数据来源',
              type: 'pie',
              radius: '80%',
              data:array,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              normal:{
                label:{
                  show: true,
                  formatter: '{b} : {c} ({d}%)'
                },
                labelLine :{show:true}
              }
            }
          ]
        };
        pieOption && myChart.setOption(pieOption);



      }))
    },

  }
}
</script>

<style scoped>

</style>
